<template>
	<view class="home">
			<!-- 头部 -->
			<view class="home-header">
				<image class="header-logo" src="../../static/images/logo.png"></image>
				<view class="header-search">
					<text class="iconfont icon-sousuo"></text>
					<input type="text" placeholder-style="color:red" placeholder="搜索商品">
				</view>
				<button class="header-btn">搜索商品</button>
			</view>  
			
			<!--导航项 -->
			<scroll-view scroll-x="true" class="home-nav">
				<view class="home-nav-all">
					<view class="nav-item" :class="{active:navId===0}" @click="changeNavId(0)">推荐</view>
					<view class="nav-item" :class="{active:navId===nav.L1Id}" v-for="nav in navList" :key="nav.L1Id" @click="changeNavId(nav.L1Id)">{{nav.text}}</view>
				</view>
			</scroll-view>
			
			<!-- 滚动视图 -->
			<scroll-view scroll-y="true" class="home-content" >
				<view v-show="navId===0">
					<!-- 轮播图 -->
					<swiper class="content-lunbo" :indicator-dots="true" circular :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item>
							<image src="https://yanxuan.nosdn.127.net/static-union/167843730916560f.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
						</swiper-item>
						<swiper-item>
							<image src="https://yanxuan.nosdn.127.net/static-union/1678772937d79140.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
						</swiper-item>
						<swiper-item>
							<image src="https://yanxuan.nosdn.127.net/static-union/167842837600d2af.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
						</swiper-item>
					</swiper>
					<!-- 内容口号 -->
					<view class="content-slogan">
						<view class="slogan-item" v-for="slogan in sloganList" :key="slogan.desc">
							<image :src="slogan.icon" mode=""></image>
							<text>{{slogan.desc}}</text>
						</view>
					</view>
					<!-- 内容导航项 -->
					<view class="content-nav">
						<view class="nav-item" v-for="nav in navList" :key="nav.L1Id">
							<image :src="nav.picUrl" mode=""></image>
							<text>{{nav.text}}</text>
						</view>
					</view>
					<!-- 内容楼层--多个 -->
					<ContentFloor v-for="floors in floorsList" :key="floors.titlePicUrl" :floors="floors"></ContentFloor>
				</view>
				<Card v-show="navId!==0" :navId="navId"></Card>
			</scroll-view>
	  </view>
</template>

<script>
	import ContentFloor from './components/ContentFloor.vue'
	import Card from './components/Card.vue'
	import {mapGetters} from 'vuex'
	
	export default {
		name:'Home',
		data(){
			return{
				isShow:false,
				navId:0
			}
		},
		components:{
			ContentFloor,
			Card
		},
		computed:{
			...mapGetters('home',['navList','sloganList','floorsList']),
		},
		methods:{
			changeNavId(id){
				this.navId = id
			}
		},
		onLoad(){
			// 参数要有模块名称s
			this.$store.dispatch('home/getHomeInfoData') 
		},
	}
</script>
<style scoped lang="stylus">
	.home
		.home-header
			display: flex
			align-items: center
			height: 40upx;
			padding: 20upx 10upx
			.header-logo
					width: 120upx
					height: 40upx
					margin: 0 10upx
			.header-search
				border: 1upx solid #999;
				flex: 1
				margin: 0 10upx
				font-size: 26upx
				padding: 4upx
				display: flex
				align-items: center
				.iconfont 
					margin-right:10rpx
			.header-btn
				width: 140upx;
				//height: 40upx;
				line-height: 36upx
				font-size: 26upx
				text-align: center
				padding: 10upx
		.home-nav 
			.home-nav-all
				display: flex
				height: 80upx
				.nav-item
					flex-shrink: 0
					font-size: 26upx
					padding: 20upx 10upx
					text-align: center
					width: 120upx
					&.active
						border-bottom: 1upx solid #f00
		.home-content 
			height: calc(100vh - 160upx);
			.content-lunbo
				image 
					width: 100%
					height: 350upx
			.content-slogan
				display: flex
				justify-content: space-around
				padding: 10upx 0
				.slogan-item
					display: flex
					align-items: center
					font-size: 24upx
					image
						width: 30upx
						height: 30upx
						margin-right: 4upx
			.content-nav
				display: flex
				flex-wrap: wrap
				width: 100%;
				.nav-item
					width: 20%
					font-size: 26upx
					display: flex
					flex-direction: column
					align-items: center
					padding-top: 40upx
					image
						width: 75%
						height: 120upx
						padding-bottom: 20upx
</style>